/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
  const params = {
    status: '', // 传空 查询全部  1-待审核  2-审核通过
    channel_id: '', // 传空 查询全部
    page: 1,   // 页码
    per_page: 2  // 当前页条数
  }

  // 总数
  let totalCount = 0

  async function getArticlesList() {
    // const res = await axios.get('/v1_0/mp/articles', {params})
    const res = await axios.get('/v1_0/mp/articles', {params: params})
    // const res = await axios({url:'/v1_0/mp/articles', params})
    console.log(res)
    // 展示
    document.querySelector('.art-list').innerHTML =
    res.data.results.map(item => {
      return `
          <tr>
            <td>
              <img src="${item.cover.type === 0 ? 'https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500' : item.cover.images[0]}" alt="${item.cover.type}">
            </td>
            <td>${item.title}</td>
            <td>
            ${item.status === 2 ? '<span class="badge text-bg-success">审核通过</span>' : '<span class="badge text-bg-primary">待审核</span>'}
            </td>
            <td>
              <span>${item.pubdate}</span>
            </td>
            <td>
              <span>${item.read_count}</span>
            </td>
            <td>
              <span>${item.comment_count}</span>
            </td>
            <td>
              <span>${item.like_count}</span>
            </td>
            <td data-id=${item.id}>
              <i class="bi bi-pencil-square edit"></i>
              <i class="bi bi-trash3 del"></i>
            </td>
          </tr>
        `
    }).join('')

    // 3.1 保存并设置文章总数
    totalCount = res.data.total_count
    document.querySelector('.total-count').innerHTML = `共${totalCount}条`
  }

  // 页面加载 调用
  getArticlesList()

/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
async function getChannelList(){
  try{
    const res = await axios({
      url:'/v1_0/channels'
    })
    console.log(res)
    document.querySelector('.form-select').innerHTML = `<option value="" selected>请选择文章频道</option>
      ${res.data.channels.map(item => {
      return `<option value="${item.id}">${item.name}</option>`
    }).join('')}`
  }catch(err){
    console.dir(err)
  }
}

// 函数调用
getChannelList()

// 设置查询参数对象
// 1单选框
document.querySelectorAll('.form-check-input').forEach(item => {
  item.addEventListener('change', e => {
    console.log(e.target.value)
    params.status = e.target.value
  })
})
// 2选择框
document.querySelector('.form-select').addEventListener('change', e => {
  console.log(e.target.value)
  params.channel_id = e.target.value
})

// 筛选按钮
document.querySelector('.sel-btn').addEventListener('click', async e => {
  console.log(params)
  // const res = await axios.get('/v1_0/mp/articles', params)
  // console.log(res)
  // 函数调用
  getArticlesList()
})

/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
  // 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
  document.querySelector('.next').addEventListener('click', e => {
    // 共多少页
    const pageCount = Math.ceil(totalCount / params.per_page)
    console.log(pageCount)
    // 当前页码
    const page = params.page
    if(page === pageCount || pageCount === 0) {
      alert('已经是最后一页了！')
    }else{
      params.page++
      // 展示
      document.querySelector('.page-now').innerHTML = `第${params.page}页`
      // 查询渲染
      getArticlesList()
    }
  })
  // 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
  document.querySelector('.last').addEventListener('click', e => {
    // 当前页码
    const page = params.page
    if(page === 1) {
      alert('已经是第一页了！')
    }else{
      params.page--
      // 展示
      document.querySelector('.page-now').innerHTML = `第${params.page}页`
      // 查询渲染
      getArticlesList()
    }
  })

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
// 事件委托
document.querySelector('.art-list').addEventListener('click', async e => {
  console.dir(e.target.parentNode.dataset)
  if(e.target.parentNode.dataset.id && e.target.tagName === 'I'){
    // 删除
    if(e.target.classList.contains('del')){
      const res = await axios.delete(`/v1_0/mp/articles/${e.target.parentNode.dataset.id}`)
      console.log(res)
      // 统一跳到第一页
      // params.page = 1
      // console.log(params.page)
      // 展示
      // document.querySelector('.page-now').innerHTML = `第${params.page}页`
      // 判断tr的行数 为1时 page-- 需要自动向前翻页 ,如果page=1时 就不需要page--
      const children = document.querySelector('.art-list').children
      console.log(children)
      if(children.length === 1 && params.page !== 1){
        params.page--
        // 展示
        document.querySelector('.page-now').innerHTML = `第${params.page}页`
      }

      // 查询渲染
      getArticlesList()
    }
    // 编辑 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
    if(e.target.classList.contains('edit')){
      // 查询父级自定义属性id的值
      const artId = e.target.parentNode.dataset.id
      // 跳转到修改文章页面（共用发布文章页面）
      // location.href = `../publish/index.html?artId=${artId}`
      // 等价  location = 'http://www.example.com' 与  location.href = 'http://www.example.com' 等价。
      location = `../publish/index.html?artId=${artId}`
    }
  }
})
